<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header flex justify-between">
        <el-button class="button" @click="addSortList" type="primary">新增</el-button>
        <el-icon>
          <Loading />
        </el-icon>

      </div>
    </template>
    <div v-for="o in SortList" :key="o" class="text item flex justify-between">
      <div>{{ o.title }}</div>
      <div class="flex justify-around w-50">
        <el-switch v-model="o.checked" @change="upChanged(o.id, o.checked)" />
        <el-tag @click="updateSortList(o.id)">修改</el-tag>
        <el-tag @click="removeSort(o.id)">删除</el-tag>
      </div>
    </div>
  </el-card>
  <el-drawer v-model="sortDrawerFlag" direction="rtl">
      <template #header>
      <div>{{ titleSort }}</div>
      </template>
      <template #default>
        <el-form>
        <el-form-item label="商品分类：">
          <el-input v-model="value1"></el-input>
        </el-form-item>

       
      </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-drawer>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useStore } from 'vuex' // 引入useStore 方法
import { getListSort, delSort, updateSort, addSort } from "../API/index"
import { ElMessage } from 'element-plus';
const store = useStore()  // 该方法用于返回store 实例
const value1 = ref('')
const color = ref('rgba(19, 206, 102, 0.8)')
let sortDrawerFlag = ref(false)
// 所有图标
let iconImg = ref('')
// 所有数据集合
let SortList = reactive([])
// 获取所有分类数据
let getList = async () => {
  SortList.length = 0
  let { data } = await getListSort()
  SortList.push(...data)
  console.log(data);
}
getList()
let titleSort = ref('')
// 添加
const addSortList = () => {
  titleSort.value = '添加'
  value1.value = ''
  sortDrawerFlag.value=true
}
let Sortids = ref('')
// 修改
const updateSortList = (ids) => {
  titleSort.value = '修改'
  value1.value = ''
  sortDrawerFlag.value=true
  Sortids.value = ids
}
// 修改状态
const upChanged = (ids, val) => {
  console.log(ids, val);
  let data = updateSort({ id: ids, checked: val})
  ElMessage({
    type: 'success',
    message: '修改状态成功'
  })
}
const confirmClick = async () => {
  switch (titleSort._value) {
    case '添加':
      let datas = await addSort({title: value1._value})
      ElMessage({
        type: 'success',
        message: '添加成功'
      })
      break
    case '修改':
      let data = await updateSort({id: Sortids._value, title: value1._value })
      ElMessage({
        type: 'success',
        message: '修改成功'
      })
      console.log(data, Sortids._value);
      break
  }
  getList()
  sortDrawerFlag.value=false

}
// 删除
const removeSort = async (idss) => {
  let data = await delSort({ id: idss })
  console.log(data);
  ElMessage({
    type: 'success',
    message: '删除成功'
  })
  getList()
}
const cancelClick = () => {
  sortDrawerFlag.value=false


}
</script>